{% extends "base.html" %}
{% block content %}
<section class="hero">
    <h1 class="title">效能数据--专业、效率、口碑</h1>
    <p class="subtitle">全面掌握团队交付效能、工作量分布与质量状况。</p>
</section>

<!-- 时间筛选器 -->
<section class="filter-bar">
    <div class="filter-group">
        <label class="filter-label">时间范围</label>
        <div class="date-range">
            <input type="date" class="date-input" id="startDate" />
            <span class="date-separator">至</span>
            <input type="date" class="date-input" id="endDate" />
        </div>
        
        <button class="action filter-apply" id="applyFilter">应用筛选</button>
        <button class="action subtle filter-apply" id="resetFilter">重置</button>
        <button class="action ai-analyze" id="aiAnalyze" style="margin-left: 10px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
            🤖 AI分析
        </button>
    </div>
</section>
<!-- 第一部分：交付情况 -->
<section class="data-section">
    <div class="section-header">
        <h2>交付情况</h2>
    </div>
    
    <!-- 总体指标 -->
    <div class="metrics-grid">
        <div class="metric-card">
            <h3>需求吞吐率</h3>
            <div class="metric-value" id="totalThroughput">—</div>
        </div>
        <div class="metric-card">
            <h3>新增需求数量</h3>
            <div class="metric-value" id="newRequirements">—</div>
        </div>
        <div class="metric-card">
            <h3>需求交付数量</h3>
            <div class="metric-value" id="deliveredRequirements">—</div>
        </div>
    </div>

    <!-- FT项目表单 -->
    <div class="table-container">
        <div class="table-header">
            <h3>FT项目明细</h3>
        </div>
        <table class="data-table">
            <thead>
                <tr>
                    <th>FT项目名称</th>
                    <th>需求吞吐率</th>
                    <th>新增需求数量</th>
                    <th>需求交付数量</th>
                </tr>
            </thead>
            <tbody id="ftProjectTable">
                <!-- 数据将通过 JavaScript 填充 -->
            </tbody>
        </table>
    </div>

    <!-- 延期需求列表 -->
    <div class="table-container">
        <div class="table-header">
            <h3>延期需求</h3>
        </div>
        <table class="data-table">
            <thead>
                <tr>
                    <th>需求名称</th>
                    <th>FT名称</th>
                    <th>系统</th>
                    <th>PM</th>
                    <th>RD</th>
                    <th>FE</th>
                    <th>QA</th>
                </tr>
            </thead>
            <tbody id="delayedRequirementsTable">
                <!-- 数据将通过 JavaScript 填充 -->
            </tbody>
        </table>
    </div>
</section>

<!-- 第二部分：工作量情况 -->
<section class="data-section">
    <div class="section-header">
        <h2>工作量情况</h2>
    </div>
    
    <div class="table-container">
        <table class="data-table">
            <thead>
                <tr>
                    <th>人员名称</th>
                    <th>饱和度</th>
                    <th>代码当量</th>
                    <th>总工时</th>
                    <th>AI活跃天数</th>
                </tr>
            </thead>
            <tbody id="workloadTable">
                <!-- 数据将通过 JavaScript 填充 -->
            </tbody>
        </table>
    </div>
</section>

<!-- 第三部分：缺陷情况 -->
<section class="data-section">
    <div class="section-header">
        <h2>缺陷情况</h2>
    </div>
    
    <!-- 只保留总缺陷数显示 -->
    <div class="row">
        <div class="col-md-12">
            <div class="card metric-card">
                <div class="card-body text-center">
                    <h5 class="card-title">总缺陷数</h5>
                    <h2 class="text-danger" id="total-defects">0</h2>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mt-4">
        <!-- 缺陷状态分布图 -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">缺陷状态分布</h5>
                </div>
                <div class="card-body">
                    <canvas id="defect-status-chart"></canvas>
                </div>
            </div>
        </div>
        
        <!-- 缺陷优先级分布图 -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">缺陷优先级分布</h5>
                </div>
                <div class="card-body">
                    <canvas id="defect-priority-chart"></canvas>
                </div>
            </div>
        </div>
        
        <!-- 业务线缺陷柱状图 -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">业务线缺陷统计</h5>
                </div>
                <div class="card-body">
                    <canvas id="ft-defect-chart"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mt-4">
        <!-- 创建人缺陷柱状图 -->
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">创建人缺陷统计</h5>
                </div>
                <div class="card-body">
                    <canvas id="defect-creator-chart"></canvas>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}